<template>
    <div>
        <div class="top">
            <div class="header">
                <div class="search" @click="$router.push('/search')">
                    <i class="iconfont icon-sousuo"></i>
                    在当前场景下搜索
                </div>
            </div>
            <div class="title">
                <div class="nav_list">
                    <span
                        @click="change(index, item.tagId, item.name)"
                        :class="{ active: titleNum == index }"
                        v-for="(item, index) in titleList"
                        :key="item.tagId"
                        >{{ item.name }}</span
                    >
                </div>
            </div>
            <ul class="filter">
                <li
                    v-for="(item, index) in sort_type"
                    :key="item"
                    :class="{
                        active2: sortNum == index,
                    }"
                    @click="filterClick(index)"
                >
                    {{ item }}
                </li>
            </ul>
        </div>
        <div class="wrap">
            <van-list
                v-model="loading"
                :finished="finished"
                :immediate-check="false"
                finished-text="没有更多了"
                @load="onLoad"
            >
                <water-list :list="imgList"></water-list>
            </van-list>
        </div>
        <BackTop :height="100">
            <div id="backTop">
                <i class="iconfont icon-shang goback_icon"></i>
            </div>
        </BackTop>
    </div>
</template>
<script>
import waterList from "@/components/waterList";
export default {
    data() {
        return {
            kind_id: "",
            titleList: [],
            imgList: [],
            titleName: "全部",
            titleNum: 0,
            tagId: 0,
            sort_type: ["最热", "最新", "使用最多", "最多收藏"],
            sortNum: 0, //代表sort_type中所传的参数
            page: 1,
            loading: false, // 是否处于触底加载状态
            finished: false, // 是否已加载完成
        };
    },
    components: {
        waterList,
    },
    created() {
        this.kind_id = this.$route.params.kindId;
        // console.log(this.kind_id);
        this.getTitleList();
        this.getImgList();
    },
    methods: {
        //切换分类
        change(index, tagId, name) {
            this.titleNum = index;
            this.tagId = tagId;
            this.titleName = name;
            this.sortNum = 0;
            this.imgList = [];
            this.page = 1;
            console.log(
                this.kind_id,
                this.page,
                this.sortNum,
                this.titleName,
                this.tagId
            );
            this.getImgList();
        },
        filterClick(index) {
            this.sortNum = index;
            this.imgList = [];
            this.page = 1;
            this.getImgList();
        },
        async getTitleList() {
            let res = await this.$fetch(
                `/api/home/getDesignType.do?_dataType=json&_dataClientType=3&client_type=40&second_kind_id=${this.kind_id}`
            );
            // console.log(res);
            if (res.body.secondKindInfo.repoTag.use.length == 0) {
                this.titleList = [
                    { name: "全部", tagId: 0, thirdKindId: 1 },
                    ...res.body.secondKindInfo.repoTag.style,
                ];
            } else {
                this.titleList = [
                    { name: "全部", tagId: 0, thirdKindId: 1 },
                    ...res.body.secondKindInfo.repoTag.use,
                ];
            }
            // console.log(this.titleList);
        },
        async getImgList() {
            let res = await fetch(
                `/api/designtemplate/getWxAppTemplateByKindId.do?_dataType=json&_dataClientType=3&client_type=40&fid=0&type=0&page_no=${this.page}&sid=${this.$route.params.kindId}&is_new=1&price_type=0&sort_type=${this.sortNum}&name=${this.titleName}&use_id=${this.tagId}`
            ).then((r) => r.json());
            console.log(res.body.cacheUrl);
            let url = res.body.cacheUrl.split(".com")[1];
            console.log(url);
            let res2 = await this.$fetch(`/pub${url}`);
            // console.log(res2.body.templates);
            this.imgList.push(...res2.body.templates);
            // console.log(this.imgList);
        },
        async onLoad() {
            this.page++;
            // console.log("触底" + this.page);
            this.loading = true;
            let res = await this.$fetch(
                `/api/designtemplate/getWxAppTemplateByKindId.do?_dataType=json&_dataClientType=3&client_type=40&fid=0&type=0&page_no=${this.page}&sid=${this.kind_id}&is_new=1&price_type=0&sort_type=${this.sortNum}&name=${this.titleName}&use_id=${this.tagId}`
            );
            // console.log(res);
            let url = res.body.cacheUrl.split(".com")[1];
            let res2 = await this.$fetch(`
                /pub${url}
            `);
            // console.log(res2.body.templates);
            // console.log(res2.body);
            if (res2.body) {
                if (res2.body.templates.length) {
                    this.imgList.push(...res2.body.templates);
                    this.loading = false;
                    // console.log(this.imgList);
                }
            } else {
                this.finished = true;
            }
        },
    },
};
</script>
<style lang="scss" scoped>
div {
    .top {
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background-color: #fff;
        .header {
            width: 100%;
            box-sizing: border-box;
            padding: 0.2rem;
            background-color: #fff;
            .search {
                line-height: 0.6rem;
                font-size: 0.3rem;
                color: #666;
                border-radius: 0.5rem;
                box-sizing: border-box;
                padding: 0.1rem;
                text-align: center;
                background-color: #f5f5f5;
            }
        }
        .title {
            overflow: auto;
            border-bottom: 0.01rem solid #dedede;
            .nav_list {
                line-height: 0.6rem;
                white-space: nowrap;
                font-size: 0.3rem;
                span {
                    display: inline-block;
                    padding: 0.1rem 0;
                    margin: 0 0.2rem;
                    border-bottom: 0.05rem solid transparent;
                }
                .active {
                    font-weight: bolder;
                    border-bottom: 0.05rem solid blue;
                }
            }
        }
        .filter {
            padding: 0.2rem;
            display: flex;
            align-items: center;
            // background-color: plum;
            li {
                padding: 0.1rem 0.2rem;
                margin-right: 0.15rem;
                font-size: 0.28rem;
                background-color: #f5f5f5;
                border-radius: 0.6rem;
            }
            .active2 {
                background-color: #0773fc;
                color: white;
            }
        }
    }
    .wrap {
        padding-top: 3.1rem;
        // background-color: orangered;
    }
}
</style>